<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/uploadify.css">
    <link type="text/css" rel="stylesheet" href="/js/plugins/layer/laydate/skins/default/laydate.css" id="LayDateSkin">
    <link rel="stylesheet" href="/css/bootstrap-chinese-region.css">

</head>
<body>
<h2>{{if .update}}更新{{else}}添加{{end}}</h2>
<!--style给定宽度可以影响编辑器的最终宽度-->

<!--style给定宽度可以影响编辑器的最终宽度-->
<form id="FORM_validate" action="/city/{{if .update}}update{{else}}add{{end}}" method="post">
    <input id="form_Id" type="hidden" value="{{if .update}}{{.City.Id}}{{end}}" name="{{if .update}}Id{{end}}">
    <div class="">
    	<div class="form-group col-md-12">
            <label class="col-md-3 control-label">读书会名称：</label>
            <div class="col-md-9">
                <input id="form_CityName" name="CityName" class="form-control" placeholder="请在此输入" value="{{if .update}}{{.City.CityName}}{{end}}">
            </div>
        </div>
        <div class="form-group col-md-12">
            <label for="address" class="col-md-3">读书会地点：</label>
            <div class="bs-chinese-region flat dropdown col-md-9" data-submit-type="id" data-min-level="1" data-max-level="3">
                <input type="text" class="form-control" name="CityPosition" id="form_CityPosition" placeholder="选择你的地区" data-toggle="dropdown" readonly="" value="{{if .update}}{{.City.CityPosition}}{{end}}">
                <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <div>
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#province" data-next="city" role="tab" data-toggle="tab">省份</a></li>
                            <li role="presentation"><a href="#city" data-next="district" role="tab" data-toggle="tab">城市</a></li>
                            <li role="presentation"><a href="#district" data-next="street" role="tab" data-toggle="tab">县区</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="province">--</div>
                            <div role="tabpanel" class="tab-pane" id="city">--</div>
                            <div role="tabpanel" class="tab-pane" id="district">--</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

		<input type="hidden" value="{{if .update}}{{.City.HotPoint}}{{end}}" name="HotPoint">
		<input type="hidden" value="{{if .update}}{{.City.FatherCity}}{{end}}" name="FatherCity">
		<input type="hidden" value="{{if .update}}{{.City.CityExtraInt641}}{{end}}" name="CityExtraInt641">
		<input type="hidden" value="{{if .update}}{{.City.CityExtraString1}}{{end}}" name="CityExtraString1">
		<input type="hidden" value="{{if .update}}{{.City.CityExtraString2}}{{end}}" name="CityExtraString2">
		
    	<div class="form-group col-md-12">
            <div class="col-md-12 col-md-offset-3">
                <button class="btn btn-primary" type="submit">保存内容</button>
                {{if .update}}{{else}}
                <button class="btn btn-white" type="submit">取消</button>
                {{end}}
            </div>
        </div>
    </div>
</form>



<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor.all.min.js"></script>
<script type="text/javascript" src="/lang/zh-cn/zh-cn.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-chinese-region.js"></script>


<!-- jQuery UI -->
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<!-- laydate js -->
<script src="/js/plugins/layer/laydate/laydate.js"></script>

<!--form validate-->
<script>
    $().ready(function () {
        // validate the comment form when it is submitted
        $("#FORM_validate").validate({
            rules: {
                CityName:{
                    required:true,
                    minlength: 2
                },
            }
        });
    });

</script>

<script>
        $.getJSON('/js/sql_areas.json',function(data){

            /**重定义数据结构**/
            /**
             * id 键,name 名字,level 层级,parentId 父级
             */
            for (var i = 0; i < data.length; i++) {
                var area = {id:data[i].id,name:data[i].cname,level:data[i].level,parentId:data[i].upid};
                data[i] = area;
            }
            console.log(data);

            $('.bs-chinese-region').chineseRegion('source',data);//导入数据并实例化
            $('.bs-chinese-region').chineseRegion('source',data).on('changed.bs.chinese-region',function(e,areas){
                //areas是已选择的地区数据，按先选择的在最前的方式排序。
                console.log("hi");
                console.log(areas);
                $("#form_CityPosition").attr("value",$('.bs-chinese-region').chineseRegion('source'));
            });
        });
</script>


</body>
</html>